import React, { Component } from 'react'
import { Image, Row, Col, Skeleton, Card, Avatar, Alert, Button } from 'antd'
import { Link } from 'react-router-dom'
import './index.css'
const { Meta } = Card
export default class Article extends Component {
    state = { loading: true }
    render() {
        const { title, author, brief, pic, id } = this.props
        const { loading } = this.state
        return (
            <div className="article">
                <Row>
                    <Col span={6}>
                        <Image
                            width={300}
                            height={200}
                            src={pic}
                            fallback=""
                        /></Col>
                    <Col span={18}>
                        <Card
                            style={{ width: '100%', height: 200, boxShadow: '3px 2px 6px #C0C0C0'}}
                        >
                            <Alert type='none'
                                action={
                                    <Button size="small" type="text" style={{ color: '#1E90FF'}}>
                                        <Link to={{ pathname: '/detail', state: { id: id, title: title, author: author, brief: brief, pic: pic } }}>
                                            查看全文
                                        </Link>
                                    </Button>
                                }
                                style={{ marginBottom: '10px', backgroundColor: 'white' }} />
                            <Skeleton loading={loading} avatar active>
                                <Meta
                                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                                    title={title}
                                    description={brief}
                                />
                            </Skeleton>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}
